<!-- campo dentro formulario -->
<div class="crudField crud_text">
	<label for="cliente"> Cliente </label>
	<select id="cliente" name="object.cliente.id">
		<option value="">&{'crud.none'}</option> 
		#{list items:_clientes,	as:'cliente'}
			<option value="${cliente.id}" #{if (_field!=null && _field.cliente!=null && cliente.id.equals(_field.cliente.id))} selected #{/if}>
			${cliente}
			</option>
		#{/list}
	</select>  
	<img id="searchCliente" src="/public/images/Add.png" alt="Add">
</div>

<!-- dialogo para busqueda de entidad -->
<div id="dialog-search-clientes"  style="display: none" class="dialog-style">
		<h2 id="crudShowTitle">&{'crud.blank.title', 'Cliente'}
		<input type="text" id="clienteSearch" name="clienteSearch">
		<img id="addCliente" src="/public/images/Add.png" alt="Add">
		</h2>
		<div class="objectForm">
			<div class="crudField crud_text" id="clientesDiv">
				<table id="clientesTable">			
					#{list items:_clientes, as:'cliente'}				
						<tr><td><a href="#" onclick='selectAndCloseClienteDialogs("${cliente.id}");' class="cliente" >${cliente}</a></td></tr>
					#{/list}
				</table>
			</div>
		</div>	
</div> 

<!-- dialogo para alta de nueva entidad -->
<div id="dialog-add-cliente"  class="dialogCliente" style="display: none" class="dialog-style">
		<h2 id="crudShowTitle">&{'crud.blank.title', 'Cliente'}
		</h2>
		<div id="nuevoContactoError"></div>
		<div class="objectForm">
			<div class="crudField crud_text">
				<label for = "razonSocialNuevoCliente">Razon Social</label><input type="text" id="razonSocialNuevoCliente" name="razonSocialNuevoCliente" value="">
			</div>
			<div class="crudField crud_text">
				<label for = "nombreNuevoCliente">Nombre</label><input type="text" id="nombreNuevoCliente" name="nombreNuevoCliente" value="">
			</div>
			<div class="crudField crud_text">
				<label for = "apellidoNuevoCliente">Apellido</label><input type="text" id="apellidoNuevoCliente" name="apellidoNuevoCliente" value="">
			</div>
			<div class="crudField crud_text">
				<label for = "marcaComercialNuevoCliente">Marca Comercial</label><input type="text" id="marcaComercialNuevoCliente" name="marcaComercialNuevoCliente" value="">
			</div>
			<div class="crudField crud_text">
				<label for = "emailNuevoCliente">Email</label><input type="text" id="emailNuevoCliente" name="emailNuevoCliente" value="">
			</div>
			<div class="crudField crud_text">
				<label for = "telefonoNuevoCliente">Telefono</label><input type="text" id="telefonoNuevoCliente" name="telefonoNuevoCliente" value="">
			</div>
			<input type="button" value="Save" onclick="saveCliente();">
		</div>				
</div>

<script type="text/javascript">

$().ready(function() {
	
	$( "#dialog-search-clientes").dialog({
		autoOpen: false,
	    width: 'auto', 
	    maxWidth: 550,
	    minWidth: 450,
		height: 'auto',
		fluid: true, 
	    resizable: false,
	    dialogClass: "dialog-style",
	    open: function(event, ui){
	    },
	    close: function(event, ui){
	    }
	});
	
	$( "#dialog-add-cliente").dialog({
		autoOpen: false,
	    width: 'auto', 
	    maxWidth: 550,
	    minWidth: 450,
		height: 'auto',
		fluid: true, 
	    resizable: false,
	    dialogClass: "dialog-style",
	    open: function(event, ui){
	    },
	    close: function(event, ui){
	    }
	});
	
	$( "#searchCliente" ).click(function() {
		$( "#dialog-search-clientes" ).dialog( "open" );
		return false;
	});
	$( "#addCliente" ).click(function() {
		$( "#dialog-add-cliente" ).dialog( "open" );
		return false;
	});
	
	$("#clienteSearch").keyup(function() {
		  searchClientes();
	});
});

/* esta funcion busca las entidades segun el criterio de busqueda */
function searchClientes(){
	$.get("/Organizaciones/search",  {
		organizacionId: '',
		nombre: $("#clienteSearch").val()
	},function(data, id){
		if(data[0] != 'ERROR'){
			$("#clientesTable").remove();
			var clientes = JSON.parse(data[1]);
			var i = 0;
			html = "<table id='clientesTable'>";
			for(i = 0; i < clientes.length; i++) {
				html = html + 
				'<tr><td><a href="#" onclick="selectAndCloseClienteDialogs('+clientes[i].id+');" class="cliente" >'+
				clientes[i].razonSocial + ' ' + clientes[i].nombre + ' ' + clientes[i].apellido+ ' ' + clientes[i].marcaComercial +
				'</a></td></tr>';				
			}
			html = html + "</table>";
			$("#clientesDiv").append(html);
			return false;
		} else {
			return false;
		}
		
	},'json');
}

/* esta funcion guarda la nueva entidad en la base de datos y la setea en el campo del formulario */
function saveCliente() {
	razonSocial = $("#razonSocialNuevoCliente").val();
	nombre = $("#nombreNuevoCliente").val();
	apellido = $("#apellidoNuevoCliente").val();
	marcaComercial = $("#marcaComercialNuevoCliente").val();
	email = $("#emailNuevoCliente").val();
	telefono = $("#telefonoNuevoCliente").val();
	
	$.get("/Eventos/newCliente",  {
		id: '${_evento}',
		razonSocial: razonSocial, 
		nombre: nombre,
		apellido: apellido,
		marcaComercial: marcaComercial,	
		telefono: telefono, 
		email:email
	},function(data){
		if(data[0] != 'ERROR'){
			saveAndCloseClienteDialogs(data[1], data[2]);
		}else {
			alert(data[1]);
		}
		
	},'json');
	
}

/* esta funcion agrega el nuevo campo en el formulario y cierra los dialogs */
function saveAndCloseClienteDialogs(id, valor){
	
	$("#cliente").append('<option value=' + id + ' selected>' + valor +'</option>');
	
	closeClienteDialogs();
}

/* esta funcion setea el campo seleccionado en el formulario y cierra los dialogs */
function selectAndCloseClienteDialogs(id){
			
	$("#cliente option[value='"+id+"']").prop('selected', true);
	
	closeClienteDialogs();
}

function closeClienteDialogs(){
	$('#clienteSearch').val("");
	$('#cliente_nombre').val("");
	$("#dialog-add-cliente").dialog( "close" );
	$("#dialog-search-clientes").dialog( "close" );
}
</script>